<script setup>
import { onMounted, ref, watch, reactive } from 'vue'
import orderitem from '@/components/orderitem.vue'
import { Regetorder, centelOrder, Regetorders, commonExpress, RegefahupOrdere } from '@/api/adverorder.js'
import { showToast } from "vant";
import { ElMessageBox } from 'element-plus'


const dialogFormVisible = ref(false)
const formLabelWidth = '70px'
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
    exprossList: [],
    exporssId: '',
    huiId:''
})

const vipType = ref('')
const typeList = [
  { value: '', text: '全部' },
  { value: 1, text: '待支付' },
  { value: 2, text: '待发货' },
  { value: 3, text: '待收货' }
]
const loading = ref(false)
const page = ref(1)
const total = ref(0)
const refreshing = ref(false)
const searchValue = ref('')
const orderList = ref([])
const dialogVisible = ref(false)

watch(searchValue, () => {
    if (!searchValue.value.trim()) {
        refreshing.value = true
    }
})

const onLoadMore = () => {
    if (page.value <= Math.ceil(total.value / 10)) {
        getRechargeList()
    }
}

onMounted(() => {
    refreshing.value = true
    onRefresh()
    getexpross()
})
const onRefresh = () => {
    page.value = 1
    total.value = 0
    orderList.value = []
    console.log(vipType,'vipTypevipTypevipType')
    getRechargeList()
}

const getexpross = async () => {
    const result = await commonExpress()
    if (result.code == 200) {
        console.log(result)
        form.exprossList = result.data
    }
}

const handleClose = async (id) => {
    ElMessageBox.confirm('确认取消订单？')
        .then(() => {
            console.log('确认')
            cancelOrder(id)
        })
        .catch(() => {
            console.log('quxiao')
        })
}

const cancelOrder = async (id) => {
    try {
        const result = await centelOrder(id)
        if (result.code === 200) {
            showToast({ type: 'success', message: result.msg })
            onRefresh()
        } else {
            showToast({ type: 'fail', message: result.msg })
        }
    } catch (err) {
        showToast({ type: 'fail', message: result.msg })
    }
}
const enterFh = async () => {
    console.log(form.name, form.exporssId)
    try {
        const result = await RegefahupOrdere(form.huiId,[{express_name: form.exporssId, express_no: form.name}])
        if (result.code === 200) {
            showToast({ type: 'success', message: result.msg })
            dialogFormVisible.value = false
            onRefresh()
        }
    } catch (err) {
        showToast({ type: 'fail', message: result.msg })
    }
}
const enterOrder = async (id) => {
    dialogFormVisible.value = true
    form.huiId = id

}

const getRechargeList = async () => {
    loading.value = true
    try {
        const result = await Regetorder({
            page: page.value,
            limit:'300',
            userId: searchValue.value,
            status:vipType.value
        })
        if (result.code === 200) {
            if (page.value === 1) {
                orderList.value = result.data.data
            } else {
                orderList.value = [...orderList.value, ...result.data.data]
            }
            total.value = result.data.total
            page.value++
        }
    } catch (e) {
        showToast({ type: 'fail', message: e.message })
    } finally {
        loading.value = false
        refreshing.value = false
    }
}

const onSearch = () => {
    onRefresh()
}

</script>

<template>
    <div class="user-container">
        <el-affix>
        <form class="search-form">
            <van-search v-model="searchValue" show-action clearable placeholder="请输入用户id" @search="onSearch"
                clear-trigger="always">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </form>
        <van-dropdown-menu>
      <van-dropdown-item @change="onRefresh" v-model="vipType" :options="typeList" />
    </van-dropdown-menu>
    </el-affix>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="user-list" v-model:loading="loading" :finished="page * 10 >= total" finished-text="没有更多了"
                @load="onLoadMore">
                <orderitem @cencel="handleClose(user.id)" @enter="enterOrder(user.id)" v-for="user in orderList"
                    :key="user.id" :user="user" />
            </van-list>
            <van-back-top bottom="10vh" />
        </van-pull-refresh>



        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <span>确认取消？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>




        <el-dialog v-model="dialogFormVisible" title="确认发货" width="80%">
            <el-form :model="form">
                <el-form-item label="订单号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入快递单号" />
                </el-form-item>
                <el-form-item label="选择快递" :label-width="formLabelWidth">
                    <el-select v-model="form.exporssId" placeholder="请选择快递">
                        <el-option v-for="i in form.exprossList" :label="i.name" :value="i.name" :key="i.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="enterFh">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped></style>
